vue组件传参的八种方式

2023-08-13 09:59| 来源: 网络整理| 查看: 265

vue组件传参的方式是无论在工作中，还是面试的时候都会碰到的问题，参考网上的文章，总结一下原文链接 www.cnblogs.com/bamboopande…

① props传参子组件定义 props 有三种方式: //第一种数组形式 props:['***','***','***'] //第二种对象形式 props:{ ***:String, ***:Number } //第三种嵌套对象方式 props:{ ***:{ type: String, default: 0, required: true, // 返回值不是 true,会警告 validator(val) { return val === 10 } } } 复制代码父组件传参: 静态属性传参 1. 在不定义 props 类型的情况下 props 接受到的均为 String。 2. 当 props 属性指定为 Boolean 时，并且只有属性 key 没有值 value 时接受到的是 true -- 有只有属性没有值, 这种情况 props 指定类型是 Boolean 则接收到的是 true 动态属性传参 1. 需要区分非简写形式传入的值是对象，则会对应 props 中多个值 2. 会保留传入值的类型 3. 如果是表达式则获取到的是表达式的计算结果 //prop 接收到 Number 类型的 123 //prop 接收到 Array 类型的 [1, 2, 3] //prop 会接收到 xxx1 和 xxx2 俩个参数。这种不支持简写形式复制代码 ② attrs 和 listeners $attrs 会获取到 props 中未定义的属性（class 和 style 属性除外）,支持响应式常用的场景有俩种 1.组件嵌套组件时可以使用 $attrs 来支持过多的属性支持。比如 elementUI 的 table 组件。支持的属性十几个，而平常封装的时候用的最多的也就一俩个。 2.属性默认是添加在父组件上的，有时候想把多余的属性添加在子组件上（可以结合 inheritAttrs: false 属性，让父属性不接受多余的属性） $listener 包含了父作用域中的 (不含 `.native` 修饰器的) `v-on` 事件监听器。它可以通过 v-on="$listeners" 传入内部组件——在创建更高层次的组件时非常有用。简单点讲它是一个对象，里面包含了作用在这个组件上所有的监听器（监听事件），可以通过 v-on="$listeners" 将事件监听指向这个组件内的子元素（包括内部的子组件）。下面是例子 Vue.component("Child1", { inheritAttrs: true, props: ["pChild1"], template: `

in child1:

props: {{pChild1}}

$attrs: {{this.$attrs}}

`, mounted: function() { this.$emit("test1"); } }); Vue.component("Child2", { inheritAttrs: true, props: ["pChild2"], template: `

in child->child2:

props: {{pChild2}}

$attrs: {{this.$attrs}}

触发事件 `, mounted: function() { this.$emit("test2"); } }); const app = new Vue({ el: "#app", data: { child1: "pChild1的值", child2: "pChild2的值" }, methods: { onTest1() { console.log("test1 running..."); }, onTest2(value) { console.log("test2 running..." + value); } } }); 上例中，父组件在`child1`组件中设置两个监听事件`test1`和`test2`,分别在`child1`组件和`child1`组件内部的`child2`组件中执行。还设置了三个属性`p-child1`、`p-child2`、`p-child-attrs`。其中`p-child1`、`p-child2`被对应的组件的`prop`识别。所以：\ `p-child1`组件中`$attrs`为`{ "p-child2": "pChild2的值", "p-child-attrs": 1231 }`;\ `p-child2`组件中`$attrs`为`{ "p-child-attrs": 1231 }`。再点击`child2`组件中的按钮，触发事件控制台打印出 test2 running...按钮点击复制代码 ③ $emit 通知 vue 默认有 $on $emit $once $off 几种方法来实现发布订阅模式，这也应用在了组件传参上。在组件上添加的特殊方法 @abc="methods" 就相当于使用了 $on 来监听这个方法。因此组件内可以使用 $emit 来进行通知。复制代码 ④ v-model // 写法 1 { model: { prop: 'value', event: 'update:a', }, methods: { a() { this.$emit('update:a', 1)} } } // 写法 2 { props: ['a'] methods: { a() { this.$emit('update:a', 1)} } } // 写法 3 // 1. 事件名必须是 update: + 属性名 // 2. 参数不能是表达式，最好是 data 里面的属性 { props: ['a'] methods: { a() { this.$emit('update:a', 1)} } } 复制代码 ⑤ 插槽复制代码 ⑥ refs root parent children 组件获取组件实例，元素获取元素根组件父组件子组件(所有的子组件，不保证顺序) 复制代码 ⑦ project/inject 注入的值是非响应的 // 父组件提供 project(){ return{ parent:this } } //子组件注入 inject: ['parent'] inject: { parent: 'parent' } inject: { parent: { from:"parent", default:2 } } 复制代码 ⑧ Vuex

【本文地址】

vue组件传参的八种方式

vue组件传参的八种方式

今日新闻

推荐新闻